<template>
  <div class="index-zpIndex">
      <div id="homeWrap">
          <!--头部大导航区域start-->
          <header></header>
          <!--头部大导航区域end-->
          <article>
              <!--五个卡片区域start-->
              <div class="tabEntrance">
                  <div class="job"><span class="jobImg"></span>招聘职位</div>
                  <div class="resume"><span class="resumeImg"></span>简历库</div>
                  <div class="interview"><span class="interviewImg"></span>面试管理</div>
                  <div class="test"><span class="testImg"></span>人才测评</div>
                  <div class="report"><span class="reportImg"></span>统计报表</div>
              </div>
              <!--五个卡片区域end-->
              <!--四个功能区域start-->
              <div class="mainFunction">
                  <div class="publish"><span class="publishImg"></span>发布职位</div>
                  <div class="import"><span class="importImg"></span>导入简历</div>
                  <div class="invite"><span class="inviteImg"></span>邀约面试</div>
                  <div class="offer"><span class="offerImg"></span>发送offer</div>
              </div>
              <!--四个功能区域end-->
              <!--统计数据区域start-->
              <div class="statisticData">
                  <div class="interviewData">
                      <p>面试</p>
                      <div class="leftData">
                          <ul>
                              <li>5</li>
                              <li>今日待面试</li>
                          </ul>
                          <ul>
                              <li>6</li>
                              <li>等待面试</li>
                          </ul>
                          <ul>
                              <li>11</li>
                              <li>等待结果</li>
                          </ul>
                      </div>

                  </div>
                  <div class="countData">
                      <p>统计</p>
                      <div class="rightData">
                          <ul>
                              <li>27</li>
                              <li>在招职位</li>
                          </ul>
                          <ul>
                              <li>319</li>
                              <li>简历总数</li>
                          </ul>
                      </div>
                  </div>
              </div>
              <!--统计数据区域end-->
              <!--招聘日程start-->
              <div class="recruitSchedule">
                  <p class="recruitScheduleTitle">招聘日程</p>
                  <div id="calendar">
                      <p class="interviewCount">安排面试数<span class="interviewCountData">3</span></p>
                  </div>
              </div>
              <!--招聘日程end-->
          </article>
      </div>
  </div>
</template>

<script>
import firstLabelRadio from "./child/firstLabelRadio.vue"
// 发送ajax 请求的组件
import getData from '../../api/getData'
//日历插件
import fullCalendar from 'vue-fullcalendar'

export default {
  data: function () {
    return {
        header: {
            left: 'prev',
            center: 'title',
            right: 'next,today,agendaDay,agendaWeek,month'
        },
        allDaySlot: false,
        defaultView: 'agendaDay',
        events:[ {
            title: 'luyument.chanpinjingli ',
            start: '2017-07-06 11:00:00',
            end: '2017-07-06 12:00:00'
        },{
            title: 'zhangmo ofjdlkgj ',
            start: '2017-07-06 11:00:00',
            end: '2017-07-06 12:00:00'
        },{
            title: 'cekjfljfdhhfk',
            start: '2017-07-06 11:00:00',
            end: '2017-07-06 12:00:00'
        }]

    }
  },
  mounted: function () {

  },
  methods:{

  },
  components:{
  }
}
</script>

<style scoped lang="scss" >
    * {
        margin: 0px;
        padding: 0px;
    }
    html,
    body {
        width: 100%;
        height: 100%;
        min-width: 820px;
        min-height: 600px;
        font-family: "microsoft yahei";
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.75px;
    }
    $width_100: 100%;
    /*最外层包裹壳*/
    #homeWrap {
        width: $width_100;
        height: 100%;
        position: relative;
        /*头部大的导航*/
        header {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #e1e1e1;
        }
        /*主要的内容部分外壳*/
        article{
            position: absolute;
            top: 65px;
            right: 20px;
            left: 20px;
            bottom: 0px;
            /*五个卡片的外壳*/
            .tabEntrance {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 15%;
                /*招聘职位、简历库、面试管理、人才测评、统计报表外壳*/
                .job,
                .resume,
                .interview,
                .test,
                .report {
                    width: 18%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 16px;
                    color: #546576;
                    letter-spacing: 1px;
                    border: 1px solid #e1e1e1;
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
                    border-radius: 2px;
                    /*招聘职位的图片*/
                    .jobImg {
                        width: 28px;
                        height: 29px;
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*简历库的图片*/
                    .resumeImg {
                        width: 28px;
                        height: 28px;
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*面试管理的图片*/
                    .interviewImg {
                        width: 32px;
                        height: 32px;
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*人才测评的图片*/
                    .testImg {
                        width: 30px;
                        height: 34px;
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    .reportImg,
                    .publishImg,
                    .importImg,
                    .inviteImg,
                    .offerImg {
                        width: 30px;
                        height: 33px;
                    }
                    /*统计报表的图片*/
                    .reportImg {
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*发布职位的图片*/
                    .publishImg {
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*导入简历的图片*/
                    .importImg {
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*邀约面试的图片*/
                    .inviteImg {
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                    /*发送offer的图片*/
                    .offerImg{
                        background: url("../../assets/img/folder.png") center no-repeat;
                    }
                }
            }
            .mainFunction,
            .statisticData,
            .recruitSchedule {
                border: 1px solid #e1e1e1;
                box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
                border-radius: 2px;
            }
            /*主要功能的外壳*/
            .mainFunction {
                display: flex;
                justify-content: space-around;
                margin-top: 1.5%;
                width: 100%;
                height: 18%;
                .publish,
                .import,
                .invite,
                .offer {
                    width: 25%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
            }
            /*统计数据外壳*/
            .statisticData {
                margin-top: 1.5%;
                width: 100%;
                height: 20%;
                /*面试数据部分*/
                .interviewData {
                    display: inline-block;
                    width: 60%;
                    height: 100%;
                    border-right: 1px solid #e1e1e1;
                    position: relative;
                }
                /*统计数据部分*/
                .countData {
                    display: inline-block;
                    margin-left: -5px;
                    width: 40%;
                    height: 100%;
                    position: relative;
                }
                .leftData,
                .rightData {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    position: absolute;
                    top: 22px;
                    bottom: 0px;
                    right: 0px;
                    left: 0px;
                }
            }
            /*招聘日程外壳*/
            .recruitSchedule {
                margin-top: 1.5%;
                width: 100%;
                height: 40%;
                .recruitScheduleTitle {
                    padding-bottom: 8px;
                    border-bottom:  1px solid #e1e1e1;
                }
                .interviewCount {
                    font-size: 12px;
                    color: #999999;
                    padding-bottom: 8px;
                    border-bottom: 1px solid #e1e1e1;
                }
                .interviewCountData {
                    width: 18px;
                    height: 16px;
                    line-height: 16px;
                    display: inline-block;
                    background: #4A90E2;
                    border-radius: 3px;
                    margin-left: 5px;
                    text-align: center;
                    color: #fff;
                }
            }
        }
        div {
            box-sizing: border-box;
            background-clip: padding-box;
            width: 100%;
        }
        p {
            padding: 10px 0px 0px 15px;
            font-size: 14px;
            color: #666666;
            letter-spacing: 1px;
        }
        li {
            list-style: none;
        }
        /*统计数据那几个蓝色数字*/
        li:nth-of-type(1) {
            text-align: center;
            font-size: 24px;
            color: #4A90E2;
            letter-spacing: 1.5px;
        }
    }
</style>
<!--
功能：首页
作者：陈丽
时间：2017/07/06
-->
